
<div style="margin-top:15%"></div>
<div nz-row >
    <div nz-col [nzOffset]="'4'" style="padding-left:5%" [nzSpan]="16">
        <div style="padding-left:20%;">
                <p-autoComplete (onSelect)="select($event)"  [placeholder]="'歌名'" [style]="{'width':'60%'}" [inputStyle]="{'height':'3em','width':'100%'}" [(ngModel)]="sname" [suggestions]="results"  (completeMethod)="searchRes($event)" field="name"  >
                        <ng-template let-value pTemplate="selectedItem">
                                <span style="font-size:18px">{{value.name}}</span>
                            </ng-template>
                </p-autoComplete>
                
        </div>
    </div>
    <div nz-col [nzOffset]="'13'" style="padding-left:5%" [nzSpan]="8">
        <button style="height:3em" nz-button [nzType]="'primary'" (click)="loading()" [nzLoading]="isLoading">
            <span>搜索</span>
        </button>
    </div>
</div>
<br>
<br>
<br>
<br>
<div style="padding:5%" [hidden]="!this.isSearch">
    <nz-table  #nzTable [nzAjaxData]="musicInfos" [nzTotal]="5" [nzIsPagination]="false" [nzLoading]="isLoading2">
        <thead nz-thead>
            <tr>
                <th nz-th>
                    <span>歌名</span>
                </th>
                <th nz-th>
                    <span>歌手</span>
                </th>
                <th nz-th>
                    <span>专辑</span>
                </th>
                <th nz-th>
                    <span>mid</span>
                </th>
                <th nz-th>
                    <span>添加</span>
                </th>
            </tr>
        </thead>
        <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let data of table.data">
                <td nz-td>
                    {{data.name}}
                </td>
                <td nz-td>{{data.singer}}</td>
                <td nz-td>{{data.album}}</td>
                <td nz-td>
                    {{data.id}}
                </td>
                <td nz-td>
                    <button style="height:3em" nz-button [nzType]="'primary'" (click)="ok(data.id,data.name)">
                        <i class="fa fa-plus fa-2x" aria-hidden="true"></i>
                    </button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>